<template>
  <div class="index">
    <h3>vant-toast-轻提示</h3>
    <p>在页面中间弹出黑色半透明提示,用于消息通知,加载提示,操作结果提示等场景</p>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  methods:{
    
  },
  
  mounted(){

    

    // 信息弹出
    // this.$toast("请输入正确的信息!");

    // loading 
    // this.$toast.loading({
    //   message: '加载中...',
    //   forbidClick: true,
    // })

    // success fail 展示提示
    // this.$toast.success('成功文案');
    // this.$toast.fail('失败文案');

    // 自定义图标 图片 加载图标类型
    // this.$toast({
    //   message: '自定义图标',
    //   icon: 'like-o',
    // })
    // this.$toast({
    //   message: '自定义图片',
    //   icon: 'https://img.yzcdn.cn/vant/logo.png',
    // })
    // this.$toast.loading({
    //   message: '加载中...',
    //   forbidClick: true,
    //   loadingType: 'spinner',
    // });


    // toast 自定义位置
    // this.$toast({
    //   message: '顶部提示',
    //   position: 'top',
    // })
    // this.$toast({
    //   message: '底部提示',
    //   position: 'bottom'
    // })

    // 动态更新提示信息的处理，通过修改<toast>返回实例的-message-动态更新提示信息
    // const toast = this.$toast.loading({
    //   duration: 0,
    //   forbidClick: true,
    //   message: '倒计时 3 秒',
    // });
    // let second = 3;
    // const timer = setInterval(() => {
    //   second--;
    //   if (second) {
    //     toast.message = `倒计时 ${second} 秒`;
    //   } else {
    //     clearInterval(timer);
    //     this.$toast.clear();
    //   }
    // }, 1000);

  }
}
</script>

<style lang="scss" scoped>
.index {
  border: 1px solid yellow;
}
</style>
